<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card shadow="never">
        <!-- 卡片表头 -->
        <div class="el-card__body">
          <span class="selectionHeader"
            >说明：目前支持学科和关键字条件筛选</span
          >
          <el-button
            type="success"
            icon="el-icon-edit"
            size="small"
            @click="$router.push({ path: 'new' })"
          >
            新增试题
          </el-button>
        </div>

        <!-- 筛选区域 -->
        <el-form ref="form" :model="formTable" label-width="80px">
          <!-- 第一行筛选区域 -->
          <el-row type="flex" class="row-bg" :gutter="20">
            <el-col :span="6">
              <el-form-item label="学科">
                <el-select
                  v-model="formTable.subjectID"
                  placeholder="请选择学科"
                  @change="onSubjectChange(formTable.subjectID)"
                >
                  <el-option
                    v-for="(item, index) in subjectName"
                    :key="index"
                    :label="item.subjectName"
                    :value="item.id"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>

            <el-col :span="6">
              <el-form-item label="目录">
                <el-select
                  v-model="formTable.catalogID"
                  placeholder="请选择目录"
                  @change="onDirectoryChange(formTable.catalogID)"
                >
                  <el-option
                    v-for="(item, index) in twoLevelDirectory"
                    :key="index"
                    :label="item.directoryName"
                    :value="item.id"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>

            <el-col :span="6">
              <el-form-item label="标签">
                <el-select v-model="formTable.tags" placeholder="请选择">
                  <el-option
                    v-for="(item, index) in tagList"
                    :key="index"
                    :label="item.tagName"
                    value="item.id"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="关键字">
                <el-input
                  v-model="formTable.keyword"
                  placeholder="根据题干搜索"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>

          <!-- 第二行筛选区域 -->
          <el-row type="flex" class="row-bg" :gutter="20">
            <el-col :span="6">
              <el-form-item label="试题类型">
                <el-select
                  v-model="formTable.questionType"
                  placeholder="请选择"
                >
                  <el-option
                    v-for="(item, index) in questionTypeList"
                    :key="index"
                    :label="item"
                    :value="item"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="难度">
                <el-select v-model="formTable.difficulty" placeholder="请选择">
                  <el-option
                    v-for="(item, index) in difficultyList"
                    :key="index"
                    :label="item"
                    :value="item"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="方向">
                <el-select v-model="formTable.direction" placeholder="请选择">
                  <el-option
                    v-for="(item, index) in directionList"
                    :key="index"
                    :label="item"
                    value="item.value"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="录入人">
                <!-- select 与 formTable 中creatorID双向绑定-->
                <!-- option 把录入人的数组遍历并把值赋值 -->
                <el-select v-model="formTable.creatorID" placeholder="请选择">
                  <el-option
                    v-for="item in creatorIDList"
                    :key="item.id"
                    :label="item.username"
                    :value="item.id"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>

          <!-- 第三行筛选区域 -->
          <el-row type="flex" class="row-bg" :gutter="20">
            <el-col :span="6">
              <el-form-item label="题目备注">
                <el-input v-model="formTable.remarks"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="企业简称">
                <el-input v-model="formTable.shortName"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <!-- 城市和地区的二级联动 -->
              <!-- 思路:
                   1.分别定义空城市组 和 空地区组
                   2.城市先和表单的数据v-modle绑定, 拿到城市数据 赋值到空城市组,并且v-for遍历出来
                   3.给城市下拉框注册 change事件,必须并传入 form表单中的城市数据(点击城市下拉框时,就能触发地区获取数据事件)
                   4.在change事件中,调用 获取地区数据方法并传参,获取数据并赋值给空地区数组
                   5.地区下拉框对地区数组进行遍历渲染-->
              <el-form-item label="城市">
                <div class="citySelect">
                  <el-select
                    v-model="formTable.province"
                    placeholder="请选择"
                    style="margin-right: 10px"
                    @change="urbanSubordinate(formTable.province)"
                  >
                    <el-option
                      v-for="(item, index) in provinceList"
                      :key="index"
                      :label="item"
                      :value="item"
                    ></el-option>
                  </el-select>
                  <el-select v-model="formTable.city" placeholder="请选择">
                    <el-option
                      v-for="(item, index) in citylist"
                      :key="index"
                      :label="item"
                      :value="item"
                    ></el-option>
                  </el-select>
                </div>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item style="float: right">
                <div class="btnGroup">
                  <el-button @click="removeForm" size="mini">清除</el-button>
                  <el-button type="primary" @click="searchForm" size="mini"
                    >搜索</el-button
                  >
                </div>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>

        <!-- 标签页 -->
        <!-- 选项卡部分 -->
        <el-tabs v-model="activeName" type="card" @tab-click="tableColumn">
          <el-tab-pane label="全部" name="all"> </el-tab-pane>
          <el-tab-pane label="待审核" name="0"> </el-tab-pane>
          <el-tab-pane label="已审核" name="1"> </el-tab-pane>
          <el-tab-pane label="已拒绝" name="2"> </el-tab-pane>
        </el-tabs>
        <!-- 警告提示部分 -->
        <el-alert :title="'数据一共' + counts + '条'" type="info" show-icon>
        </el-alert>
        <!-- 表格部分 -->
        <el-table :data="tableData" stripe style="width: 100%">
          <el-table-column prop="number" label="试题标号" width="180">
          </el-table-column>
          <el-table-column prop="subject" label="学科" width="180">
          </el-table-column>
          <el-table-column prop="catalog" label="目录"> </el-table-column>

          <el-table-column prop="questionType" width="180" label="题型">
            <!-- 格式化题型 -->
            <template slot-scope="scope">
              {{ scope.row.questionType | format }}
            </template>
          </el-table-column>

          <el-table-column prop="question" width="180" label="题干">
            <!-- 利用作用域插槽 scope.row.question 获取到数据,利用v-html解析处理 -->
            <template slot-scope="scope">
              <div v-html="scope.row.question"></div>
            </template>
          </el-table-column>
          <el-table-column prop="addDate" width="180" label="录入时间">
            <!-- 格式化时间 -->
            <!-- 需要定义一个插槽,来调用过滤器 | 管道运算符 -->
            <template slot-scope="scope">
              {{ scope.row.addDate | formTime }}
            </template>
          </el-table-column>
          <el-table-column prop="difficulty" width="180" label="难度">
            <template slot-scope="scope">
              {{ scope.row.difficulty | formattingDifficulty }}
            </template>
          </el-table-column>
          <el-table-column prop="creator" width="180" label="录入人">
          </el-table-column>
          <el-table-column prop="chkState" width="180" label="审核状态">
            <!-- 格式化审核状态 -->
            <template slot-scope="scope">
              {{ scope.row.chkState | formattedAudit }}
            </template>
          </el-table-column>
          <el-table-column prop="chkRemarks" width="180" label="审核意见">
          </el-table-column>
          <el-table-column prop="chkUser" width="180" label="审核人">
          </el-table-column>
          <el-table-column prop="subjectID" width="180" label="发布状态">
            <!-- 格式化发布状态 -->
            <template slot-scope="scope">
              {{ scope.row.subjectID | formattedRelease }}
            </template>
          </el-table-column>
          <el-table-column fixed="right" label="操作" width="240">
            <template slot-scope="scope">
              <el-button
                @click="previewDialogVisible = true"
                type="text"
                size="small"
                >预览</el-button
              >
              <el-button
              :disabled="scope.row.chkState !== 0"
                @click="checkQuestion(scope.row)"
                type="text"
                size="small"
                >审核</el-button
              >
              <el-button
               :disabled="scope.row.publishState === 1"
                @click="
                  $router.push({ path: 'new', query: { id: scope.row.id } })
                "
                type="text"
                size="small"
                >修改</el-button
              >
              <el-button
                v-if="scope.row.publishState === 0"
                type="text"
                size="small"
                @click="handleClickUp(scope.row, 1, $event)"
                >上架</el-button
              >
              <el-button
                v-else
                type="text"
                size="small"
                @click="handleClickUp(scope.row, 0, $event)"
                >下架</el-button
              >

              <el-button :disabled="scope.row.publishState === 1" @click="delClick(scope.row)" type="text" size="small"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页 -->
        <div class="block" style="margin-top: 20px; text-align: right">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="formTable.page"
            :page-sizes="[5, 10, 15, 20]"
            :page-size="formTable.pagesize"
            layout="prev, pager, next,sizes, jumper"
            background
            :total="counts"
          >
          </el-pagination>
        </div>
      </el-card>
      <!-- 预览弹窗 -->
      <el-dialog
        title="题目预览"
        :visible.sync="previewDialogVisible"
        width="50%"
      >
        <!-- 题目预览 -->
        <div>
          <!-- 第一行 -->
          <div>
            <div>
              <el-row>
                <el-col :span="6">【题型】：</el-col>
                <el-col :span="6">【编号】：20</el-col>
                <el-col :span="6">【难度】：困难</el-col>
                <el-col :span="6">【标签】：</el-col>
              </el-row>
            </div>
            <div style="margin-top: 30px">
              <el-row>
                <el-col :span="6">【学科】：java</el-col>
                <el-col :span="6">【目录】：javaWEB</el-col>
                <el-col :span="6">【方向】：互联网金融</el-col>
                <el-col :span="6"></el-col>
              </el-row>
            </div>
          </div>
          <hr />
          <!-- 第二行 -->
          <div>
            <div>
              <el-row>
                <el-col :span="6">【题干】：</el-col>
              </el-row>
            </div>
            <div style="margin-top: 20px">
              <el-row>
                <el-col :span="6">php是世界上最好的语言吗？</el-col>
              </el-row>
            </div>
          </div>
          <hr />
          <!-- 第三行 -->
          <div style="margin: 20px 0">
            <div style="display: flew; align-items: center">
              <span style="margin-right: 10px">【参考答案】：</span>
              <el-button type="danger" @click="showvideo = true"
                >视频答案预览</el-button
              >
            </div>

            <div style="margin-top: 10px">
              <video
                v-if="showvideo"
                height="300"
                controls="controls"
                autoplay="autoplay"
              ></video>
            </div>
          </div>
          <hr />
          <!-- 第四行 -->
          <div style="margin: 20px 0">
            <el-row>
              <el-col :span="6">【答案解析】：</el-col>
            </el-row>
          </div>
          <hr />
          <!-- 第五行 -->
          <div style="margin: 20px 0">
            <el-row>
              <el-col :span="6">【题目备注】：</el-col>
            </el-row>
          </div>
        </div>
        <span slot="footer" style="display: flex; justify-content: flex-end">
          <el-button @click="previewDialogVisible = false">关闭</el-button>
        </span>
      </el-dialog>

      <!-- 审核弹窗 -->
      <el-dialog title="提示" :visible.sync="dialogVisible" width="30%">
        <div>
          <el-radio v-model="checkData.chkState" label="1">通过</el-radio>
          <el-radio v-model="checkData.chkState" label="2">拒绝</el-radio>
          <p>审核意见:</p>
          <el-row>
            <el-input
              type="textarea"
              placeholder="请输入内容"
              :rows="2"
              resize="none"
              v-model="checkData.chkRemarks"
            >
            </el-input>
          </el-row>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="previewDialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="auditOpinion">确 定</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
// 导入城市/城市下区域 接口
import { provinces, citys } from '../../api/hmmm/citys'
// 导入 用户接口(改了名字)
import { simple as userSimpe } from '../../api/base/users'
// 导入标签接口(改了名字)
import { list as tagaList } from '../../api/hmmm/tags'
// 导入目录接口(改了名字)
import { list as directorysList } from '../../api/hmmm/directorys'
// 导入学科列表
import { list } from '../../api/hmmm/subjects'
// 导入精选题库
import {
  choice,
  choiceCheck,
  remove,
  choicePublish
} from '../../api/hmmm/questions'
// 导入 dayjs
import dayjs from 'dayjs'
// 导入table枚举数据(题型/难度/审核状态/发布状态)
import {
  questionType,
  difficulty,
  chkType,
  publishType
} from '../../api/hmmm/constants'

export default {
  name: 'QuestionsChoice',
  data () {
    return {
      // 查询table表格
      formTable: {
        page: 1, // 否当前页数
        pagesize: 5, // 每页显示多少  /** */
        subjectID: null, // 学科
        difficulty: null, // 难度
        questionType: null, // 试题类型
        tags: null, // 标签名称
        province: null, // 企业所在地省份
        city: null, // 企业所在城市
        keyword: null, // 关键字
        remarks: null, // 题目备注
        shortName: null, // 企业简称
        direction: null, // 方向
        creatorID: null, // 录入人
        catalogID: null, // 目录
        chkState: null // 审核状态
      },
      checkData: {
        chkState: '1', // 1 通过 2 不通过
        chkRemarks: '' // 审核备注
      },
      previewDialogVisible: false, // 预览弹框显示隐藏
      showvideo: false, // 答案预览显示隐藏

      dialogVisible: false, // 控制审核弹窗显示/隐藏
      citylist: [], // 城市下区域
      provinceList: provinces(), // 城市列表(因为provinces是函数,所以直接调用再赋值即可)
      // 方向列表
      directionList: [
        'o2o',
        '外包服务',
        '企业服务',
        '互联网金融',
        '企业咨询',
        '互联网',
        '电子商务',
        '其他'
      ],
      // 试题难度列表
      difficultyList: {
        1: '简单',
        2: '一般',
        3: '困难'
      },
      // 试题类型列表
      questionTypeList: {
        1: '单选',
        2: '多选',
        3: '简答'
      },
      creatorIDList: [], // 录入人数组
      tagList: [], // 标签列表数组
      subjectName: [], // 学科列表数组
      twoLevelDirectory: [], // 二级目录名数组
      tableData: [], // 表格部分
      activeName: 'all', // 标签页活动值
      counts: 0 // 数据总条数
    }
  },

  // 初始化
  created () {
    // 获取精品题库
    this.choice()
    // 获取学科列表
    this.getSubjectList()
    // 获取录入人信息
    this.userSimpe()
  },

  // 函数方法
  methods: {
    // 上架功能
    async handleClickUp (row, state, e) {
      // console.log(row)
      // console.log(e)
      // console.log(e.target)
      const parameterCollection = { id: row.id, publishState: state }

      const res = await this.$confirm(
        '此操作将' + e.target.innerText + '该作品, 是否继续?',
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      ).catch((err) => err)
      // console.log(res) // 可以点击下确认取消,来打印下判断点击的哪个
      // 如果点击的是取消,就提示信息
      // if (res === 'cancel') return this.$message('您取消了操作')
      if (res === 'confirm') {
        await choicePublish(parameterCollection)

        this.$message.success('操作成功')
        // 调用获取列表
        this.choice()
      }
    },

    // 删除弹窗
    async delClick (id) {
      const confirmRes = await this.$confirm(
        '此操作将永久删除该文件, 是否继续?',
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      ).catch((err) => err)
      // 如果你点击了取消,就弹出消息
      if (confirmRes === 'cancel') return this.$message('您取消了删除')
      // 先判断 tableData 中数组的长度，如果长度等于 1，前面又执行删除，并且删除成功
      // 就需要返回上一页
      if (this.tableData.length === 1) {
        // 页码 -1
        this.formTable.page--

        // 在此判断当前是删除的是不是第一页的最后一条数据，如果是我们需要将页码重置为 1
        if (this.formTable.page < 1) {
          this.formTable.page = 1
        }
      }

      // 直接调用删除的接口,并按文档传入id
      await remove(id)
      // 调用获取列表
      this.choice()
    },

    // 审核弹窗显示
    checkQuestion (row) {
      this.questionItem = row
      this.dialogVisible = true
    },
    // 审核弹窗确定
    async auditOpinion () {
      // 判断它的文本域长度是否为0,若为0,直接return 返回出去,并提示
      if (this.checkData.chkRemarks.trim().length === 0) {
        return this.$message.warning('请输入审核意见')
      }
      // console.log(this.questionItem.id, this.checkData.chkState, this.checkData.chkRemarks)
      // 掉用接口,并且传参,其中 chkState 需要转换为 数字类型
      const res = await choiceCheck({
        id: this.questionItem.id,
        chkState: Number(this.checkData.chkState),
        chkRemarks: this.checkData.chkRemarks
      })
      console.log(res)
      // 弹窗关闭
      this.dialogVisible = false
      // 提示信息
      this.$message.success('审核成功')
      // 刷新table表格
      this.choice()
    },

    // 获取城市列表
    urbanSubordinate (val) {
      // console.log(val)
      // console.log(citys(val))
      // console.log(citys(val))
      // 接受传参,拿到地区数据,并赋值到 空地区组中
      this.citylist = citys(val)
    },

    // 获取录入人
    async userSimpe () {
      // 调用用户信息接口
      const res = await userSimpe()
      // console.log(res)
      // 把信息赋值给录入人空数组
      this.creatorIDList = res.data
    },

    // 获取标签列表
    async onDirectoryChange (val) {
      // 传参获取标签列表数组
      const res = await tagaList(val)
      // console.log(res)
      this.tagList = res.data.items
    },

    // 获取目录列表
    async onSubjectChange (val) {
      // console.log(val)
      // val是获取数据的id
      // this.formTable.tags = null
      // this.formTable.catalogID = null
      // 调用目录列表接口,并传入数据
      const res = await directorysList(val)
      console.log(res)
      // console.log(res.data.items)
      // 把二级目录列表赋值给 空二级目录数组
      this.twoLevelDirectory = res.data.items
    },

    // 获取学科列表
    async getSubjectList (val) {
      // 调用学科列表接口
      const res = await list({ pagesize: 100 })
      // console.log(res)
      // 拿到学科列表 赋值给 空的学科列表数组
      this.subjectName = res.data.items
    },

    // table栏切换
    tableColumn () {
      // 提前定义一个全部的状态为null,用switch case break 来判断状态,赋值给定义好的表单数据,再重新调用列表
      switch (this.activeName) {
        case 'all':
          this.formTable.chkState = 'null' // 全部的状态
          this.choice() // 重新获取列表
          break
        case '0':
          this.formTable.chkState = '0' // 全部的状态
          this.choice() // 重新获取列表
          break
        case '1':
          this.formTable.chkState = '1' // 全部的状态
          this.choice() // 重新获取列表
          break
        case '2':
          this.formTable.chkState = '2' // 全部的状态
          this.choice() // 重新获取列表
          break
      }
    },
    // 获取精品题库
    async choice () {
      // 需要把 formtable的值全部传入到接口中直接获取
      const subjectListRes = await choice(this.formTable)
      // console.log(subjectListRes)
      // 赋值给表格
      this.tableData = subjectListRes.data.items
      // 数据总数赋值
      this.counts = subjectListRes.data.counts
    },

    // 筛选-清除
    removeForm () {
      // 把 formTable 表单赋值为{} 空对象
      this.formTable = {}
    },

    // 筛选-搜索
    searchForm () {
      // 调用渲染 精品题库接口
      // 因为在渲染table表格时,已经传入了参数,所以在这里直接调用获取列表的函数即可,不用传参
      this.choice()
    },

    // 分页 每页的页数  (每页条数发生改变时触发)
    handleSizeChange (newSize) {
      // console.log(`每页 ${val} 条`)
      // 重新赋值每页条数
      this.formTable.pagesize = newSize
      // 刷新获取数据// 调用学科列表
      this.choice()
    },

    // 分页  当前页
    handleCurrentChange (newNum) {
      // console.log(`当前页: ${val}`)
      this.formTable.page = newNum
      // 刷新获取数据// 调用学科列表
      this.choice()
    }
  },

  // 过滤器
  filters: {
    // 格式化发布
    formattedRelease (val) {
      // 利用数组的find方法找到元素,因为它传的参是一个字符串不能用所以转化一下才能相等比较
      const res = publishType.find((item) => item.value === Number(val))
      // console.log(res)
      if (res) {
        return res.label
      } else {
        return '未知'
      }
    },

    // 格式化审核
    formattedAudit (val) {
      // 利用数组的find方法找到元素,因为它传的参是一个字符串不能用所以转化一下才能相等比较
      const res = chkType.find((item) => item.value === Number(val))
      // console.log(res)
      if (res) {
        return res.label
      } else {
        return '未知'
      }
      // return res.label
    },

    // 格式化难度
    formattingDifficulty (val) {
      // 利用数组的find方法找到元素,因为它传的参是一个字符串不能用所以转化一下才能相等比较
      const res = difficulty.find((item) => item.value === Number(val))
      // console.log(res)
      if (res) {
        return res.label
      } else {
        return '未知'
      }
      // return res.label
    },

    // 格式化题型
    format (val) {
      // 利用数组的find方法找到元素,因为它传的参是一个字符串不能用所以转化一下才能相等比较
      const res = questionType.find((item) => item.value === Number(val))
      if (res) {
        return res.label
      } else {
        return '未知'
      }
    },

    // 格式化时间
    formTime (time) {
      // dayjs 方法接收需要格式化的时间
      // format 方法是指按照那种格式对时间进行格式化
      return dayjs(time).format('YYYY-MM-DD')
    }
  }
}
</script>

<style scoped>
.el-card__body {
  display: flex;
  justify-content: space-between;
}
.selectionHeader {
  padding: 0;
  color: pink;
  font-size: 12px;
}
.el-select {
  width: 100%;
}
.citySelect {
  display: flex;
  align-items: center;
}

.btnGroup {
  display: flex;
  align-items: center;
}
</style>
